<script setup>
  import { onMounted, ref } from 'vue'
  import {
    onLoad,
    onShow,
    onReachBottom,
    onPullDownRefresh,
  } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'

  //tab
  // const offsetTop = ref(0)
  // const tabInfo = ref()
  // async function categary() {
  //   // uni.showLoading({
  //   // 	title: '加载中',
  //   // })
  //   const res = await http.request({
  //     url: '/api/goods/getGoodsClass',
  //     method: 'POST',
  //   })
  //   tabInfo.value = res.data
  //   // uni.hideLoading()
  // }

  //获取商品
  const goodsList = ref([])
  // const sort = ref('')
  const currentPage = ref(1)
  async function getgoods() {
    let obj = {
      page: currentPage.value,
      limit: 10,
      is_limit: 1,
    }
    if (datatype.value == 'in') {
      obj = Object.assign({}, obj, {
        class_id: '191',
        is_ys: 0,
        is_limit: undefined,
      })
    }
    const res = await http.request({
      url: '/api/goods/getGoods',
      method: 'POST',
      data: obj,
    })
    // console.log(res)
    goodsList.value = [...goodsList.value, ...res.data]
    // goodsList.value = {...goodsList.value,res.data}
  }

  async function hope(id) {
    const res = await http.request({
      url: '/api/goods/scPost',
      method: 'POST',
      data: {
        id: id,
        type: '1',
      },
    })
    // console.log(res)
    if (res.st == 1) {
      goodsList.value.forEach((item) => {
        if (item.id == id) {
          if (item.is_sc == 1) {
            --item.sc_num
            item.is_sc = 0
          } else if (item.is_sc == 0) {
            ++item.sc_num
            item.is_sc = 1
          }
        }
        console.log(item)
      })
      uni.showToast({
        title: '操作成功',
        duration: 2000,
      })
    } else {
      uni.showToast({
        title: '操作失败',
        icon: 'error',
        duration: 2000,
      })
    }
  }

  // 去看商品详情
  function goMallInfo(id) {
    uni.navigateTo({
      url: `/homePage/goodsinfo/index?id=${id}`,
    })
  }
  const datatype = ref('')
  onLoad((option) => {
    datatype.value = option.type
    // console.log(option.id)
    // categary()
  })
  // 上拉加载
  // onReachBottom(() => {
  // })

  function goodsLower() {
    ++currentPage.value
    getgoods() // 获取的数据列表
  }

  onShow(() => {
    currentPage.value = 1
    goodsList.value = []
    getgoods() // 获取的数据列表
  })
</script>

<template>
  <view class="mall">
    <view class="content-wrap">
      <!-- 商品 -->
      <scroll-view
        style="height: 93vh"
        :scroll-top="scrollTop"
        scroll-y="true"
        class="scroll-Y"
        @scrolltolower="goodsLower"
      >
        <view class="goods">
          <view
            v-for="item in goodsList"
            :key="item.id"
            class="goods-item"
            @click="goMallInfo(item.id)"
          >
            <view class="" style="position: relative">
              <image
                style="width: 350rpx; height: 350rpx; display: block"
                :src="item.img"
              ></image>
              <view class="ys-bar" v-if="item.is_ys == 1">
                {{ parseTime(item.ys_time) }} 开售
              </view>
            </view>
            <text class="goods_name">{{ item.goods_name }}</text>
            <view class="price">
              <view
                class=""
                style="display: flex; align-items: center"
                v-if="item.is_integral == 1"
              >
                <image
                  style="width: 28rpx; height: 28rpx; margin-right: 10rpx"
                  src="../../static/icon.png"
                  mode=""
                ></image>
                <text
                  style="
                    font-size: 26rpx;
                    line-height: 28rpx;
                    color: #f75b5b;
                    font-weight: 600;
                  "
                  >{{ item.integral }}</text
                >
              </view>
              <text
                v-else
                style="font-size: 26rpx; color: #f75b5b; font-weight: 600"
                >￥{{ item.price }}</text
              >
              <view class="love">
                <uni-icons
                  :type="item.is_sc == 0 ? 'heart' : 'heart-filled'"
                  :color="item.is_sc == 1 ? '#EC5050' : ''"
                  size="17"
                  @tap.stop="hope(item.id)"
                ></uni-icons>
                <text
                  style="font-size: 22rpx; padding-left: 8rpx; height: 34rpx"
                  >{{ item.sc_num }}</text
                >
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .mall {
    background-color: #f5f5f5;
    // .sort {
    //   display: flex;
    //   align-items: center;
    //   width: 95%;
    //   padding: 22rpx;
    //   background-color: #fff;
    //   font-size: 26rpx;
    //   .sort-item {
    //     display: flex;
    //     align-items: center;
    //     margin-right: 34rpx;
    //   }
    // }
    .goods {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      width: 95%;
      padding: 20rpx;
      .goods-item {
        width: 350rpx;
        height: 542rpx;
        margin-bottom: 14rpx;
        background-color: #fff;
        border-radius: 14rpx;
        .ys-bar {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 50rpx;
          background-color: rgba(0, 0, 0, 0.5);
          color: white;
          font-size: 24rpx;
          line-height: 50rpx;
          text-align: center;
        }
        .goods_name {
          height: 74rpx;
          width: 100%;
          padding: 5rpx 0rpx 0rpx 8rpx;
          // display: block;
          font-size: 26rpx;
          box-sizing: border-box;
          font-weight: 600;
          display: -webkit-box;
          -webkit-line-clamp: 2; /* 限制为两行 */
          -webkit-box-orient: vertical;
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis; /* 超出部分用省略号表示 */
          white-space: normal; /* 允许换行 */
          /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
        }
        .price {
          width: 100%;
          box-sizing: border-box;
          margin-top: 32rpx;
          padding: 0 8rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .love {
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;
          }
        }
      }
    }
    .active {
      color: #3d3d3d;
    }
  }
  /* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
  .y-tab-virtual {
    position: relative;
    flex-shrink: 0;
    width: 100%;
  }
  ::v-deep .y-tabs__ellipsis {
    overflow: visible !important;
  }
  .content-wrap {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  ::v-deep .y-tab {
    margin: 0 20rpx;
  }
  ::v-deep .y-tab__text {
    font-size: 26rpx;
  }
  ::v-deep .y-tabs__bar {
    background-color: #ffe60f !important;
  }
</style>
